<template>
  <el-dialog :model-value="modelValue" @close="close()" draggable :close-on-click-modal="false" :title="title"
    width="500px">
    <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="form.menuType">
              <el-radio-button v-for="item in props.menuTypeList" :value="item.value">
                {{ item.text }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="父级菜单" prop="parentId">
            <el-tree-select v-model="form.parentId" :data="parentMenuList" :props="{
              children: 'children',
              label: 'name',
              value: 'id',
            }" :check-strictly="true" :render-after-expand="false" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="名称" prop="name">
            <el-input placeholder="名称" v-model="form.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="图标" prop="icon">
            <icon-select v-model="form.icon" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.menuType === MenuTypeEnum.Menu">
        <el-col :span="24">
          <el-form-item label="路由名称" prop="routerName">
            <el-input placeholder="路由名称" v-model="form.routerName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.menuType != MenuTypeEnum.Button && form.menuType != MenuTypeEnum.List">
        <el-col :span="24">
          <el-form-item label="路由地址" prop="routerUrl">
            <el-input placeholder="路由地址" v-model="form.routerUrl" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.menuType === MenuTypeEnum.Menu">
        <el-col :span="24">
          <el-form-item label="页面路径" prop="webFilePath">
            <el-input placeholder="页面路径" v-model="form.webFilePath">
              <template #prepend>/src/views/</template>
              <template #append>.vue</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.menuType === MenuTypeEnum.Group">
        <el-col :span="24">
          <el-form-item label="页面路径" prop="webFilePath">
            <el-input placeholder="页面路径" v-model="form.webFilePath" readonly value="Layout"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="form.menuType === MenuTypeEnum.Menu || form.menuType === MenuTypeEnum.Group">
        <el-col :span="24">
          <el-form-item label="排序" prop="apiUrl">
            <el-input placeholder="排序" v-model="form.order" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="form.menuType === MenuTypeEnum.List || form.menuType === MenuTypeEnum.Button">
        <el-col :span="24">
          <el-form-item label="权限标识" prop="permission">
            <el-input placeholder="权限标识" v-model="form.permission" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.menuType === MenuTypeEnum.List || form.menuType === MenuTypeEnum.Button">
        <el-col :span="24">
          <el-form-item label="接口地址" prop="apiUrl">
            <el-input placeholder="接口地址" v-model="form.apiUrl" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.menuType === MenuTypeEnum.Menu">
        <el-col>
          <el-form-item label="显示状态" prop="hidden">
            <el-radio-group v-model="form.hidden">
              <el-radio :value="false">显示</el-radio>
              <el-radio :value="true">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="saveForm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElNotification, FormInstance, FormRules } from "element-plus";
import { EnumData } from "@/api/enums";
import MenuApi, { SysMenu, MenuTree } from "@/api/sys/menu";
import { EditEnum } from "@/enums/EditEnum";
import { MenuTypeEnum } from "@/enums/MenuTypeEnum";

const props = defineProps({
  modelValue: Boolean,
  info: Object,
  parentId: String,
  type: Number,
  menuTypeList: Array<EnumData>,
  title: String,
});

const form = ref<SysMenu>();
watch(
  () => props.info,
  (newInfo: SysMenu, oldInfo: SysMenu) => {
    if (newInfo) {
      form.value = newInfo;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(async () => {
  await getParentMenuList();
});

//查询父级菜单数据
const parentMenuList = ref<MenuTree[]>([]);
const getParentMenuList = async () => {
  const { dataList } = await MenuApi.queryParentMenuTree(props.info.id);
  parentMenuList.value = dataList;
};

const emits = defineEmits(["update:modelValue", "success", "reloadSub"]);

const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  routerName: [
    {
      required: true,
      message: "路由名称不能为空",
      trigger: "change",
    },
  ],
});
//提交数据
const saveForm = async (formEl: FormInstance) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const { success, message } = await MenuApi[EditEnum[props.type]](form.value);
      if (success) {
        reload(form.value);
        ElNotification({
          title: message,
          type: "success",
        });
        close();
      } else {
        ElNotification({
          title: message,
          type: "error",
        });
      }
    }
  });
};

//提交成功
const reload = (data) => {
  emits("success");
  emits("reloadSub", data, form.value.parentId);
  if (form.value.parentId != props.parentId) {
    //修改的时候刷新之前的节点
    emits("reloadSub", data, props.parentId);
  }
};

const close = () => {
  emits("update:modelValue");
};
</script>
